<template>
  <div class="app-container">
    <!--row-key  数据当中 哪一个字段能够唯一的标识一行
    :expand-row-keys 要求传入的是一个数组
    -->
    <el-table
      :data="menuList"
      style="width: 100%;margin-bottom: 20px;"
      :expand-row-keys="expands"
      row-key="id"
      ref="refTable"
      @row-click="clickTable"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="名称"  align="left" width="160"></el-table-column>
      <el-table-column  align="center" prop="title" label="标题" width="80px"></el-table-column>
      <el-table-column prop="path" label="访问路径" align="center"  width="120"></el-table-column>
      <el-table-column prop="component" align="center" label="组件路径"  width="350"></el-table-column>
        <!--控制图标显示-->
      <el-table-column  align="center" label="图标" width="80px">
        <template slot-scope="{row}">
          <span
            class="link-type"
            @click="checkIcon(row.id)"
          >
            <i v-if="row.icon"><svg-icon :name="row.icon"/></i>
            <i v-else><i class="el-icon-plus"></i></i>

          </span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="是否显示" width="80px">
        <template slot-scope="{row}">
          <el-tag>
            {{statusMap[ row.isHidden ]}}
          </el-tag>
        </template>
      </el-table-column>
      <!--CRUD操作-->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
                     @click.native.stop="() => {dialogFormVisible = true,menu.pid = scope.row.id}">添加菜单</el-button>
          <span style="margin-left: 10px" v-if="scope.row.id!='1'">

            <el-button type="success" size="mini"
                       @click.native.stop="() => getById(scope.row)">修改菜单</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete"
                       @click.native.stop="() => remove(scope.row)">
            </el-button>
          </span>

        </template>
      </el-table-column>
    </el-table>
    <!--添加菜单的窗口-->
    <el-dialog :visible.sync="dialogFormVisible" :title="dialogFormValue">
      <el-form ref="menu" :model="menu" :rules="menuValidateRules" label-width="120px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menu.name"/>
        </el-form-item>
        <el-form-item label="访问路径" prop="path">
          <el-input v-model="menu.path"/>
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="menu.component"/>
        </el-form-item>
        <el-form-item label="组件标题" prop="title">
          <el-input v-model="menu.title"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetData()">取 消</el-button>
        <el-button type="primary" @click="addMenuClick()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="iconIsVisiable" >
      <Icon @addIcon="updataIcon" :id="updateIconId"></Icon>
    </el-dialog>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Form } from 'element-ui'
import { cloneDeep } from 'lodash'
import { getArticles, getPageviews, createArticle, updateArticle, defaultArticleData } from '@/api/articles'
import { IArticleData } from '@/api/types'
import { exportJson2Excel } from '@/utils/excel'
import { formatJson } from '@/utils'
import axios from 'axios'
import menuApi from "@/api/system/menu";
import Icon from "@/views/icons/index.vue"
/**菜单实体*/
const menuForm = {
  id:'',
  name: '',
  pid:'',
  path: '',
  icon:'',
  component: '',
  type : 1,
  title:'',
  isHidden:'1',
  mate:' '
}
const statusMap: { [key: string]: string } = {
  '1': '显示',
  '0': '不显示'
}
@Component({
  name:'Menu',
  components:{
    Icon
  }
})
export default class extends Vue{
  /**初始化相关属性*/



      private menuList:Array<object>= [{
        name:'zzz',
        path:'aaaa',
        component:'lkoklo',
        permissionValue:'vfgf',
        hidden:false
  }]
      private defaultProps= {
        children: 'children',
        label: 'name'
      }
      private statusMap=statusMap;
      private dialogFormValue= '添加菜单'
      private dialogFormVisible= false
      //菜单
      private menu= {...menuForm}
      private iconIsVisiable=false;
      private updateIconId='';
      // 规则验证
      private menuValidateRules= {
        name: [{required: true, trigger: 'blur', message: '菜单名必须输入'}],
        path: [{required: true, trigger: 'blur', message: '菜单路径必须输入'}],
        component: [{required: true, trigger: 'blur', message: '组件名称必须输入'}],
        title: [{required: true, trigger: 'blur', message: '组件标题必须输入'}]
      }

      // 要展开的行，数值的元素是row的key值
      private expands:Array<string>= []


  created(){
    /**获取列表数据*/
    this.fetchNodeList()
    console.log(this.menu);
  }

    /**table的方法,展开/折叠 行*/
    clickTable(row:object,index:number,e:object){
      //调用,table的方法,展开/折叠 行
      this.$refs.refTable.toggleRowExpansion(row)
    }
    /**获取列表数据*/
    fetchNodeList() {
      menuApi.getNestedTreeList().then(response => {
        if (response.success === true) {
          this.menuList = response.data.menuList
          this.expands.push(this.menuList[0].id);
          this.resetData()
        }
      });
    }
    /**删除菜单*/
    remove(data:any) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return menuApi.removeById(data.id)
      }).then(() => {
        this.fetchNodeList()// 刷新列表
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((response) => { // 失败
        if (response === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        } else {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      })
    }
    /**添加菜单点击*/
    addMenuClick() {
      (this.$refs.menu as Form).validate(async(valid) => {
        if (valid) {
          if (!this.menu.id) { // 添加
            this.addMenu()
          } else { // 修改
            this.update(this.menu)
          }
        }
      })
    }
    /**添加菜单*/
    addMenu() {
      menuApi.saveMenu(this.menu).then(response => {
        this.dialogFormVisible = false
        this.$message({
          type: 'success',
          message: '添加菜单成功'
        })
        /**刷新数据，展开菜单*/
        menuApi.getNestedTreeList().then(response => {
          if (response.success === true) {
            this.menuList = response.data.menuList
          /*  展开刚添加菜单的父级*/
            this.expands.push(this.menu.pid);
            console.log(this.expands)
            console.log(this.expands)
            this.resetData();
          }
        });

      }).catch(response => {
        this.dialogFormVisible = false
        this.$message({
          type: 'error',
          message: '添加菜单失败'
        })
      })
    }
    /**修改菜单*/
    update(obj:any) {
      menuApi.update(obj).then(response => {
        this.dialogFormVisible = false
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        // 刷新页面
        this.fetchNodeList()
        this.resetData()
      })
    }
    /**获取菜单信息**/
    getById(data:any) {
      this.dialogFormVisible = true
      this.menu = data
    }

    /**重置数据*/
    resetData() {
      this.dialogFormVisible = false
      this.menu = {...menuForm}
    }

    checkIcon(id:string){
      this.updateIconId=id;
      this.iconIsVisiable=true;
    }

  //修改icon 异步方式执行
   async updataIcon(symbol: string,id:string) {
    let axiosResponseResoult = await menuApi.updateIcon(id, symbol);
    this.iconIsVisiable = false;
    this.fetchNodeList();
     this.$message({
       type: 'success',
       message: '修改成功'
     })
  }

}
</script>
